<template>
    <div class="echartsLegend">
        <div id="energy-chart" style="width: 100%; height: 400px"></div>
        <div class="legend">
            <div>
                <label class="label1">早上</label>
            </div>
            <div>
                <label class="label2">上午班</label>
            </div>
            <div>
                <label class="label3">中午 </label>
            </div>
            <div>
                <label class="label4">下午班</label>
            </div>
            <div>
                <label class="label5">上半夜</label>
            </div>
            <div>
                <label class="label6">下半夜</label>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts"
let dataList = ["06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "0", "1", "2", "3", "4", "5"]
export default {
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            const chartDom = document.getElementById("energy-chart")
            const myChart = echarts.init(chartDom)
            const option = {
                title: {
                    text: "时段能耗对比分析",
                    left: "20"
                },
                // subtitle: {
                // 	text: "综合能耗趋势分析",
                // 	left: "left",
                // },
                toolbox: {
                    feature: {
                        print: {},
                        export: {}
                    },
                    right: 10
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                xAxis: [
                    {
                        type: "category",
                        data: dataList,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: "value"
                    }
                ],
                series: [
                    {
                        name: "用能值",
                        type: "bar",
                        data: [
                            2200000, 2100000, 1100000, 2600000, 1100000, 1300000, 600000, 1200000, 1000000, 2300000, 2200000, 1400000, 1100000, 1000000, 2300000, 2300000, 1200000,
                            1100000, 1002000, 100000, 100000, 100000, 100000, 11000
                        ],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                        "#C33531",
                                        "#EFE42A",
                                        "#64BD3D",
                                        "#EE9201",
                                        "#29AAE3",
                                        "#B74AE5",
                                        "#0AAF9F",
                                        "#E89589",
                                        "#16A085",
                                        "#4A235A",
                                        "#C39BD3 ",
                                        "#F9E79F",
                                        "#BA4A00",
                                        "#ECF0F1",
                                        "#616A6B",
                                        "#EAF2F8",
                                        "#4A235A",
                                        "#3498DB"
                                    ]
                                    console.log(params.dataIndex)
                                    var index = 0
                                    if (params.dataIndex >= 0 && params.dataIndex < 3) {
                                        index = 0
                                    } else if (params.dataIndex >= 3 && params.dataIndex < 6) {
                                        index = 1
                                    } else if (params.dataIndex >= 6 && params.dataIndex < 9) {
                                        index = 2
                                    } else if (params.dataIndex >= 9 && params.dataIndex < 13) {
                                        index = 3
                                    } else if (params.dataIndex >= 14 && params.dataIndex < 19) {
                                        index = 4
                                    } else if (params.dataIndex >= 19) {
                                        index = 5
                                    } else {
                                        index = 6
                                    }
                                    return colorList[index]
                                }
                            }
                        }
                    },
                    {
                        name: "建筑1",
                        type: "line",
                        data: [
                            700000, 1000000, 1700000, 1500000, 1800000, 2500000, 1100000, 1200000, 1300000, 2000000, 2400000, 1300000, 1200000, 2000000, 2500000, 1200000, 1300000,
                            1100000, 1002000, 100000, 100000, 100000, 100000, 11000
                        ],
                        lineStyle: {
                            color: "green"
                        }
                    },
                    {
                        name: "建筑2",
                        type: "line",
                        data: [
                            1300000, 1600000, 900000, 1900000, 1200000, 1500000, 900000, 1600000, 1700000, 1100000, 1800000, 1700000, 800000, 1700000, 1900000, 1200000, 1500000,
                            1100000, 1002000, 100000, 100000, 100000, 100000, 11000
                        ],
                        lineStyle: {
                            color: "orange"
                        }
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>

<style scoped>
.echartsLegend {
    position: relative;
    width: 100%;
    height: 400px;
    .legend {
        position: absolute;
        bottom: 25px;
        text-align: center;
        width: 100%;
        font-size: 14px;
        color: #333;
        div {
            display: inline-block;
            height: 20px;
            line-height: 20px;
            margin-right: 10px;
            label {
                display: inline-block;
                position: relative;
                width: 70px;
                &::before {
                    position: absolute;
                    content: "";
                    bottom: 7px;
                    left: 0;
                    background-color: #2680fb;
                    width: 10px;
                    height: 10px;
                    border-radius: 10px;
                }
            }
            .label1 {
                &::before {
                    background-color: #c33531;
                }
            }
            .label2 {
                &::before {
                    background-color: #efe42a;
                }
            }
            .label3 {
                &::before {
                    background-color: #64bd3d;
                }
            }
            .label4 {
                &::before {
                    background-color: #ee9201;
                }
            }
            .label5 {
                &::before {
                    background-color: #29aae3;
                }
            }
            .label6 {
                &::before {
                    background-color: #b74ae5;
                }
            }

            /* "#C33531",
                                        "#EFE42A",
                                        "#64BD3D",
                                        "#EE9201",
                                        "#29AAE3",
                                        "#B74AE5",
                                        "#0AAF9F",
                                        "#E89589",
                                        "#16A085", */
        }
    }
}
</style>
